<template>
  <div class="container">
    <div class="left-side">
      <Rank />
      <Knowledge/>
      <Knowledge1/>
      <Knowledge2/>
    </div>
    <div class="right-side">

      <Chart />
      <BigMap/>
      <UnderstandPollution/>
    </div>
  </div>
</template>

<script>
import Rank from "@/pagaes/Home/Container/Rank/index.vue";
import Knowledge from '@/pagaes/Home/Container/knowledge/index.vue';
import Knowledge1 from '@/pagaes/Home/Container/knowledge1/index.vue';
import Knowledge2 from '@/pagaes/Home/Container/knowledge2/index.vue';
import Chart from "@/pagaes/Home/Container/Chart/index.vue";
import BigMap from "@/pagaes/Home/Container/BigMap/index.vue";
import UnderstandPollution from "@/pagaes/Home/Container/UnderstandPollution/index.vue";

export default {
  components: {
    Rank,
    Knowledge,
    Knowledge1,
    Knowledge2,
    Chart,
    BigMap,
    UnderstandPollution
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  width: 1440px;
  margin-right: auto;
  margin-left: auto;

  padding-bottom: 72px;
  border-bottom: 1px solid #e6e6e6;
  .left-side {
    width: 364px;
    margin-right: 24px;
  }
  .right-side {
    width: 1052px;
  }
}
</style>